import React, { useEffect, useState } from "react";
import { Box } from "$components";
import "./style.less";
import { Progress } from "antd";
import { useSelector, useDispatch } from "react-redux";
import { getDepartmentRanking, getAcceptedCasesRanking } from "../actions/bigscreen";

const DepartmentRank = ({ title, type }) => {
  const dispatch = useDispatch();
  const [departmentRanking, setDepartmentRanking] = useState([]);
  const [acceptedCasesRanking, setAcceptedCasesRanking] = useState([]);
  const [totalAllDepartments, setTotalAllDepartments] = useState(0);
  const [totalAcceptedCases, setTotalAcceptedCases] = useState(0);
  
  useEffect(() => {
    // 获取知识产权交底书数据
    dispatch(getDepartmentRanking()).then((res) => {
      const rankingList = res.payload.data.rankingList;
      setDepartmentRanking(rankingList);
      
      // 计算所有部门的知识产权总数
      const total = rankingList.reduce((sum, department) => sum + department.totalCount, 0);
      setTotalAllDepartments(total);
    });
    
    // 获取知识产权受理量数据
    dispatch(getAcceptedCasesRanking()).then((res) => {
      const rankingList = res.payload.data.rankingList;
      setAcceptedCasesRanking(rankingList);
      
      // 计算所有部门的知识产权受理总数
      const total = rankingList.reduce((sum, department) => sum + department.totalCount, 0);
      setTotalAcceptedCases(total);
    });
  }, []);

  // 为不同部门定义颜色映射
  const departmentColors = [
    { 0: "#FFCE5A", "100%": "#ffce5a00" }, // 第1名颜色
    { 0: "#00FFFF", "100%": "#00ffff00" }, // 第2名颜色
    { 0: "#D5E9FF", "100%": "#ffffff00" }, // 第3名颜色
    { 0: "#439CFF", "100%": "#439cff00" }, // 第4名颜色
    { 0: "#9B72AA", "100%": "#9b72aa00" }, // 第5名颜色
    { 0: "#FF6B6B", "100%": "#ff6b6b00" }, // 第6名颜色
    { 0: "#A8E6CF", "100%": "#a8e6cf00" }, // 第7名颜色及以后
  ];

  // 根据type选择要显示的数据
  const dataToShow = type === "national" ? acceptedCasesRanking : departmentRanking;
  const totalCount = type === "national" ? totalAcceptedCases : totalAllDepartments;

  return (
    <Box title={title}>
      <div className="department-rank-container">
        {dataToShow.map((department, index) => {
          // 计算部门占总数的百分比
          const percentageOfTotal = totalCount > 0 
            ? Math.round((department.totalCount / totalCount) * 100) 
            : 0;
          
          return (
            <div key={index} className="department-rank-item">
              {/* 排名标识 */}
              <div className="department-rank-item-top">
                <div
                  className="department-rank-badge"
                  style={{ color: departmentColors[Math.min(index, departmentColors.length - 1)]["0"] }}
                >
                  {department.rank <= 3
                    ? `TOP ${department.rank}`
                    : `NO.${department.rank}`}
                </div>
                <div className="department-rank-item-name">{department.department}</div>
              </div>
              <div className="department-rank-item-score">
                <Progress
                  percent={percentageOfTotal}
                  status="active"
                  strokeColor={departmentColors[Math.min(index, departmentColors.length - 1)]}
                  showInfo={false} // 隐藏默认文字
                />
                {/* 自定义白色分数文字 */}
                <div
                  className="department-rank-item-value"
                  style={{ color: "#ffffff", marginLeft: 5 }}
                >
                  {department.totalCount}
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </Box>
  );
};

export default DepartmentRank;
